<template>
  <div class="container">
    <el-dialog title="富文本编辑内容展示 macked解析" :visible.sync="dialogVisible" width="60%">
      <div v-html="setContent"></div>
    </el-dialog>
  </div>
</template>
<script>
  import marked from 'marked'

  var rendererMD = new marked.Renderer()
  marked.setOptions({
    renderer: rendererMD,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
  })

  export default {
    data () {
      return {
        dialogVisible: false,
        mdContent: ''

      }
    },
    methods: {
      init(data) {
        this.dialogVisible = true
        console.log('data:',data)
        this.mdContent = data
      }
    },
    computed: {
      setContent() {
        return marked(this.mdContent, { sanitize: true })
      }
    }

  }
</script>
<style>
</style>
